<%--
  Created by IntelliJ IDEA.
  User: 闫佳宁
  Date: 2024/1/22
  Time: 9:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String baseUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=baseUrl%>">
    <title>预约管理</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .layui-table-cell {
            height: auto;
        }
    </style>
</head>
<body>
<blockquote class="layui-elem-quote">
    预约列表
</blockquote>

<form class="layui-form layui-form-pane">
    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">会议室</label>
            <div class="layui-input-inline">
                <select name="boardroomId">

                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">预约人</label>
            <div class="layui-input-inline">
                <select name="userId">

                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status">
                    <option value="">不限</option>
                    <option value="0">预约中</option>
                    <option value="1">已结束</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn" lay-submit lay-filter="search">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </div>

    </div>
</form>

<table id="booking-list" lay-filter="booking-list">

</table>
<%--表格工具条--%>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">预约</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
        <button class="layui-btn layui-btn-sm" id="dropdownButton">
            下拉按钮
            <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
        <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
            重载测试
            <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" id=rowMode">
            <span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>
            <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button>
    </div>
</script>

<%--行工具条--%>
<script type="text/html" id="bar">
    <a class="layui-btn layui-bg-sm" lay-event="edit">编辑</a>
    <a class="layui-btn layui-bg-sm layui-bg-red" lay-event="remove">结束</a>
</script>

<script src="layui/layui.js"></script>
<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;

        //调用函数
        getBoardrooms();
        getUsers();
        //渲染表格 得有数据
        table.render({
            elem: '#booking-list',
            url: 'booking?action=search',
            page: true,
            toolbar: '#toolbar',
            cols: [[
                {title: 'ID', field: 'id'},
                {title: '会议室号', field: 'boardroomName'},
                {title: '预约人', field: 'userName'},
                {title: '预约人电话', field: 'userTel'},
                {title: '预约人邮箱', field: 'userEmail'},
                {title: "开始时间", field: "startTime",templet(d) {
                        return layui.util.toDateString(d.startTime,'yyyy-MM-dd HH:mm:ss');
                    }},
                {title: "时长", field: "time"},
                {
                    title: '状态', field: 'status', templet(d) {
                        return ['预约中', '已结束'][d.status];
                    }
                },
                {title: '操作', width: 200, toolbar: '#bar'}
            ]],
            parseData(result) {
                return {
                    code: result.code,
                    msg: result.msg,
                    count: result.data.count,
                    data: result.data.list,
                };
            }
        });



        //获取会议室列表
        function getBoardrooms() {
            $.ajax({
                url: 'boardroom?action=search',
                type: 'get',
                dateType: 'json',
                success(result) {
                    var html = '<option value="">请选择会议室</option>';
                    $.each(result.data, function (index, boardroom) {
                        html += '<option value="' + boardroom.id + '">' + boardroom.name + '</option>';
                    });
                    $('select[name="boardroomId"]').html(html);

                    //渲染
                    form.render();
                },
                error() {
                    layer.msg('请求失败', {icon: 5});
                }
            });
        }

        //获取会议室列表
        function getUsers() {
            $.ajax({
                url: 'user?action=search',
                type: 'get',
                dateType: 'json',
                success(result) {
                    var html = '<option value="">请选择预约人</option>';
                    $.each(result.data, function (index, user) {
                        html += '<option value="' + user.id + '">' + user.name + '</option>';
                    });
                    $('select[name="userId"]').html(html);

                    //渲染
                    form.render();
                },
                error() {
                    layer.msg('请求失败', {icon: 5});
                }
            });
        }

        //添加员工的动作
        function addBooking() {
            //弹窗口
            layer.open({
                title: '录入预约信息',
                area: ['40%', '80%'],
                type: 2,
                content: 'booking/add.jsp',
                end() {
                    table.reloadData('booking-list');
                }
            });
        }

        //编辑员工
        function editBooking(booking) {
            layer.open({
                title: '编辑预约信息',
                area: ['40%', '80%'],
                type: 2,
                content: 'booking/edit.jsp?id=' + booking.id,
                end() {
                    table.reloadData('booking-list');
                }
            })
        }

        //表格工具条事件
        table.on('toolbar(booking-list)', function (obj) {
            if (obj.event == "add") {
                addBooking();
            }
        });

        // 添加表格删除和编辑的点击事件
        table.on('tool(booking-list)', function (row) {
            if (row.event == "edit") {
                editBooking(row.data);
            } else if (row.event == "remove") {
                layer.confirm('确认要删除会议记录吗？', function (index) {
                    //真的要删除了

                    $.ajax({
                        url: 'booking?action=remove',
                        data: {id: row.data.id},
                        type: 'post',
                        dateType: 'json',
                        success(result) {
                            if (result.code == 0) {
                                layer.msg('删除成功', {icon: 6}, function () {
                                    //刷新页面 表格显示的数据
                                    table.reloadData('booking-list')
                                })
                            } else {
                                layer.msg(result.msg, {icon: 5});
                            }
                        },
                        error() {
                            layer.msg('请求失败', {icon: 5});
                        }
                    });

                    //关闭确认框
                    layer.close(index);
                })
            }
        });

        //搜索事件
        form.on('submit(search)',function (data){

            //刷新表格数据
            table.reloadData('booking-list', {
               where: data.field,
                page: {curr: 1},
            });

            //组织表单自动提交
            return false;
        });
    });
</script>
</body>
</html>
